<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
    <style>
        .reveal pre code {
            background-color: #120;
        }
    </style>
</head>

<body>
    <img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
    <map name="pttmap">
        <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank" />
    </map>
    <div class="reveal">
        <div class="slides">
            <section>
                <h3 style="font-size: 40px">【JS-08】Angular js 常用指令ng-if、ng-class、ng-options、ng-value、ng-click是如何使用的？</h3>
                <p>深圳分院小课堂</p>
                <p>分享人：张峻</p>
            </section>
            <section>
                <p>目录</p>
                <p>1.背景介绍</p>
                <p>2.知识剖析</p>
                <p>3.常见问题</p>
                <p>4.解决方案</p>
                <p>5.编码实战</p>
                <p>6.扩展思考</p>
                <p>7.参考文献</p>
                <p>8.更多讨论</p>
            </section>
            <section>
                <section>
                    <h3>1.背景介绍</h3>
                    <p style="text-align:left;font-size:30px;">指令是一个Dom元素上的标签(和元素上的属性, CSS 类样式一样，属于这个Dom元素)， 它告诉AngualrJS的 HTML 编译器，去附加一个行为到这个Dom元素上去，这个行为可以改变这个Dom元素，或者这个Dom元素的子元素。
                    </p>
                    <p style="text-align:left;font-size:30px;">AngularJS 通过被称为 指令 的新属性来扩展 HTML。
                        <br> AngularJS 通过内置的指令来为应用添加功能。AngularJS 内置指令是扩展的 HTML 属性，带有前缀 ng-。
                    </p>
                </section>
            </section>
            <section>
                <section>
                    <h3>2.知识剖析</h3>
                </section>
                <section>
                    <h4>ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？</h4>
                </section>
                <section>
                    <h3>ng-if</h3>
                    <p style="text-align:left;font-size:30px;">ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则生成一个新的元素插入DOM中。
                    </p>
                    <p style="text-align:left;font-size:30px;">需要注意的是，当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。而且当它重新加入DOM中时，会通过原型继承从它的父作用域生成一个新的作用域。也就是说ng-if会新建作用域，而ng-show和ng-hide则不会。</p>
                    <p style="text-align:left;font-size:30px;">ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是删除或者新增节点。</p>
                </section>
                <section>
                    <h3>ng-class</h3>
                    <h3></h3>
                    <p style="text-align:left;font-size:30px;">
                        ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
                        <br> ng-class 指令的值可以是字符串，对象，或一个数组。
                        <br> 如果是字符串，多个类名使用空格分隔。
                        <br> 如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。
                        <br> 如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。
                        <br> 甚至还可以使用复杂一点三元表达式。
                    </p>
                </section>
                <section>
                    <h3>ng-options</h3>
                    <p style="text-align:left;font-size:30px;">
                        ng-options 指令用于使用 &lt;options&gt; 填充 &lt;select&gt; 元素的选项。
                        <br> ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。而且 ng-options 的选项是一个对象，ng-repeat 是一个字符串。
                    </p>
                </section>
                <section>
                    <h3>ng-value</h3>
                    <p style="text-align:left;font-size:30px;">
                        ng-value 指令用于设置 input 或 select 元素的 value 属性。
                        <br> 和value相比，它的值可以是表达式，所以相比之下可以实现更多需求。
                        <br> 比如当需要使用ng-repeat来动态生成input[]的时候，ng-value是很有用处的。
                    </p>
                </section>
                <section>
                    <h3>ng-click</h3>
                    <p style="text-align:left;font-size:30px;">
                        ng-click 指令告诉了 AngularJS HTML 元素被点击后需要执行的操作。
                        <br> 如果是使用ng-click来实现函数的执行的话，还可以进行传参。
                        <br> 一个ng-click可以触发多个操作，比如：
                        <br> &lt;button ng-click="function1();function2()"&gt;&lt;/button&gt;
                        <br> 先执行function1后执行function2
                    </p>
                </section>
            </section>

            <section>
                <section>
                    <h3>3.常见问题</h3>
                </section>
                <section>
                    <p>ng-option的用法</p>
                </section>
            </section>
            <section>
                <section>
                    <h3>4.解决方案</h3>
                </section>
                <section>
                    <p style="text-align:left;font-size:30px;">
                        ng-option的用法
                    </p>
                    <p style="text-align:left;font-size:30px;">
                       ng-option针对不同类型的数据源有不同的用法，主要体现在数组和对象上。简单来说就是它可以接收一个数组或者对象， 并对它们进行循环，将内部的内容提供给select标签内部的选项。它可以是以下两种形式。
                    </p>
                </section>
                <section>
                    <h4>1、数组作为数据源</h4>
                    <img src="../img/js-08-ng-if-class-option-value-click20180327/ngoption1.png" alt="">
                    <h4>2、对象作为数据源</h4>
                    <img src="../img/js-08-ng-if-class-option-value-click20180327/ngoption2.png" alt="">
                    <h4>说明：</h4>
                    <p style="text-align:left;font-size:22px; padding-left: 200px;">
                        array / object： 数据源的类型，有数组和对象两种<br>
                        value：迭代过程中，引用数组的项或者对象的属性值<br>
                        key：迭代过程中，引用对象的属性名<br>
                        label：选项显示的标签，用户可看到的<br>
                        select：结果绑定到ngModel中，如果没有指定，则默认绑定value<br>
                        group：group by的条件，表示按某条件进行分组<br>
                        trackexpr：用于唯一确定数组中的迭代项的表达式</p>
                </section>
            </section>
            <section>
                <section>
                    <h3>5.编码实战</h3>
                </section>
                <section>
                    <a href="../demo/js-08-ng-if-class-option-value-click20180327/demo.html">demo</a>
                </section>
            </section>
            <section>
                <section>
                    <h3>6.扩展思考</h3>
                </section>
                <section>
                    <p>ng-if的作用域问题</p>
                </section>
                <section>
                    <p style="text-align:left;font-size:30px;">
                    ng-if指令会创建一个子级作用域，因此，如果在ng-if指令中添加了元素，并向元素属性增加ng-model指令，那么ng-model指令对应的作用域属于子级作用域，而并非控制器注入的$scope作用域对象，这点在进行双向数据绑定时，需要引起注意。
                    </p>
                    <p style="text-align:left;font-size:30px;">
                        因此，解决ng-if中ng-model值无效的问题，主要方法就是在绑定值时添加$parent标识， 或者用ng-show指令代替ng-if指令，这两种方法都可以达到同样的页面效果。
                        <br> 写法如下：
                        <br> ng-model="$parent.industry"
                    </p>
                </section>
            </section>
            <section>
                <section>
                    <h3>7.参考文献</h3>
                </section>
                <section>
                    <p>参考一：
                        <a href="http://www.runoob.com/angularjs/angularjs-reference.html" target="_blank">菜鸟教程</a>
                    </p>
                    <p>参考二：
                        <a href="https://www.cnblogs.com/laixiangran/p/4956751.html" target="_blank">AngularJS select中ngOptions用法详解</a>
                    </p>
                    <p>参考三：
                        <a href="https://www.cnblogs.com/CreateMyself/p/5566412.html" target="_blank">AngularJS之ng-class（十一）</a>
                    </p>
                </section>
            </section>
            <section>
                <h3>8.更多讨论</h3>
            </section>
            <section>
                <h4>鸣谢</h4>
                <p>感谢大家观看</p>
                <p>
                    <small>BY : 朱芳山|王奎智|隋鑫|孙伟淳|刘洪利|张峻</small>
                </p>
            </section>
        </div>
    </div>
    <script src="../lib/reveal/js/head.min.js"></script>
    <script src="../lib/reveal/reveal.js"></script>
    <script>
        // 以下为常见配置属性的默认值
        // {
        // 	controls: true, // 是否在右下角展示控制条
        // 	progress: true, // 是否显示演示的进度条
        // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
        // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
        // 	keyboard: true, // 是否启用键盘快捷键来导航
        // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
        // 	center: true, // 是否将幻灯片垂直居中
        // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
        // 	loop: false, // 是否循环演示
        // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
        // 	fragments: true, // 全局开启和关闭碎片。
        // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
        // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
        // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
        // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
        // }
        // 初始化幻灯片
        Reveal.initialize({
            history: true,
            dependencies: [
                { src: '../plugin/markdown/marked.js' },
                { src: '../plugin/markdown/markdown.js' },
                { src: '../plugin/notes/notes.js', async: true },
                {
                    src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                        hljs.initHighlightingOnLoad();
                    }
                }
            ]
        });
    </script>
</body>

</html>